<%@page contentType="text/html;charset=utf-8" language="java" %>

<!DOCTYPE html>
<html>

<head>
<title>系统管理</title>
<meta charset="utf-8">
<%@include file="../common/jsp/common.jsp"%>
<script>
	requires(["artDialog"]);
</script>

<style type="text/css">
html,body{height:100%;overflow:hidden;}
.manage-iframe{width:100%; height:100%;}

.head { background-color: #0ca4ff; clear: both; color: #ffffff; display: block; height: 80px; padding: 0 5%; }
.head img, .head h2{ float: left; }
.head h1 { font-size: 20px; font-weight: 500; line-height: 80px; }

.main{height:100%;}
.main-left{width:200px;height:100%;float:left;margin-left:20px;background:#fff;}
.main-right{margin-left:240px; height:100%;min-width:750px; border-left:1px solid #f0f0f0;}

.main-left-title{background:#0ca4ff; line-height:99px;color:#fff;font-size:16px;font-weight:bold;text-align:center;}
.nav{padding:40px 0 0;position:relative;z-index:2;}
.nav-li{text-indent:30px; line-height:50px; padding-right:10px;cursor:pointer; font-size: 14px; border-bottom:1px solid #f0f0f0;}
.nav-li-hover{color:#0ca4ff;}
.nav-li-sel{color:#0ca4ff;}
.nav i{font-size: 24px;}
.nav-hover{display:none; line-height:52px; border-left:7px solid #0ca4ff;background:#f8f8f8;color:#0ca4ff;position:absolute;width:200px;top:0;z-index:1;}
</style>
</head>

<body>
<div class="head">
	<h1>系统管理<span style="float:right;font-size:14px;font-weight:normal;"><a href="../zhly/index.jsp">&lt;返回首页&gt;</a></span></h1>
</div>
<div class="main">
	<div class="main-left">
		<ul class="nav"></ul>
		<div class="nav-hover">　</div>
	</div>
	<div class="main-right">
		<iframe class="manage-iframe" src="" id="manageMainIframe" allowtransparency="true" framespacing="0" frameborder="0"></iframe>
	</div>
</div>

<script src="../common/js/jquery/jquery-1.11.3.min.js"></script>
</body>
</html>

<script type="text/javascript">
$(function() {
	// 初始化导航栏
	initNav();

	// 初始化iframe
	initIframe();
});

/**
 * 
 * @Description : 初始化导航栏
 * @return void
 * 
 * @author : wucm
 * @date : 2015年7月31日 下午12:00:11
 * 
 */
function initNav() {
	var navsIcon = {
		"manageUser" : "yonghu",
		"manageJob" : "shejishi",
		"manageFunc" : "jihuabaobiao",
		"manageApply" : "dingdan",
		"manageScope" : "dingdan",
		"manageLog" : "rili"
	}
	var navsColor = {
			"manageUser" : "#f7e233",
			"manageJob" : "#67ddcd",
			"manageFunc" : "#ffa91e",
			"manageApply" : "#0ca4ff",
			"manageScope" : "#c45ef8",
			"manageLog" : "#00E985"
	}
	var navs = [ {
		"id" : "manageUser",
		"name" : "用户管理",
		"url" : "user.jsp"
	}, {
		"id" : "manageJob",
		"name" : "角色管理",
		"url" : "job.jsp"
	}, {
		"id" : "manageFunc",
		"name" : "功能管理",
		"url" : "func.jsp"
	}, {
		"id" : "manageApply",
		"name" : "应用权限管理",
		"url" : "apply.jsp"
	}, {
		"id" : "manageScope",
		"name" : "数据权限管理",
		"url" : "scope.jsp"
	}, {
		"id" : "manageLog",
		"name" : "日志管理",
		"url" : "log.jsp"
	} ];

	// 生成导航栏
	var strs = [];
	for (var i = 0; i < navs.length; i++) {
		var n = navs[i];
		var id = n.id;
		var name = n.name;
		var url = n.url;
		var s = '<li class="nav-li" id="$1" name="$2" url="$3"><font color="$5"><i class="iconfont icon-$4"></i></font> $2</li>';
		s = s.replace("$1", id);
		s = s.replace("$2", name).replace("$2", name);
		s = s.replace("$3", url);
		s = s.replace("$4", navsIcon[id]);
		s = s.replace("$5", navsColor[id]);
		strs.push(s);
	}
	strs = strs.join("");
	$(".nav").html(strs);

	// 鼠标悬浮事件
	$(".nav-li").mouseenter(function() {
		var _o = $(this);
		var t = _o.offset().top;

		$(".nav-li:not(.nav-li-sel)").removeClass("nav-li-hover");

		$(".nav-hover").stop(true, false).animate({
			"top" : t
		}, 300, function() {
			_o.addClass("nav-li-hover");
		});
	}).click(function() {
		var _o = $(this);
		var id = _o.attr("id");
		var name = _o.attr("name");
		var url = _o.attr("url");

		// 刷新页面
		$("#manageMainIframe").attr("src", url);

		// 高亮
		$(".nav-li").removeClass("nav-li-sel");
		_o.addClass("nav-li-sel");

		$(".nav-hover").css({
			"top" : _o.offset().top
		}).show();
	});

	// 离开导航栏时自动定位到选中的菜单
	$(".nav").mouseleave(function() {
		var _sel = $(".nav-li-sel");
		var t = _sel.offset().top;
		$(".nav-hover").stop(true, false).animate({
			"top" : t
		}, 300);

		$(".nav-li").removeClass("nav-li-hover");
	});

	// 默认选中第一个
	$(".nav-li:first").click();
}

/**
 * 
 * @Description : 初始化iframe
 * @return void
 * 
 * @author : wucm
 * @date : 2015年7月31日 下午5:05:54
 * 
 */
function initIframe() {
	var h = $(window).height() - $(".head").outerHeight();
	$(".manage-iframe").height(h);
}

$(window).resize(function(){
	initIframe();
});
</script>